<template>
  <div>
    <p v-if='isReadOnlyPage === true'>{{textValue}}</p>
    <a-input v-else @click="clickJobType" :value='textValue' @change="onchange" :disabled="isDisabled" />
    <cascader-modal title="行业类别" :visible="cascaderVisible" @confirm="showCasader" @close="closeCasader" :single="true" :dataFn="getIndustryType" v-model="cascaderData"></cascader-modal>
  </div>
</template>

<script>
// import { getIndustryType } from '@/api/config'
import CascaderModal from '@/components/formComponents/CascaderModal/CascaderModal'
export default {
  components: { CascaderModal },
  name: 'JobType',
  model: {
    prop: 'value',
    event: 'change'
  },
  props: ['value', 'isReadOnlyPage', 'isDisabled'],
  data () {
    return {
      cascaderVisible: false,
      cascaderData: [],
      jobTypeData: [],
      getIndustryType: () => {},
      isShow: true
    }
  },
  computed: {
    textValue () {
      if (this.value) {
        return this.value.name
      }
      return ''
    }
  },
  methods: {
    onchange (val) {
      // console.log('JobType: ', val)
      // this.$emit('change', val)
    },
    clickJobType () {
      this.cascaderVisible = true
    },
    // 确定
    showCasader (key) {
      this.cascaderVisible = false
      this.$emit('change', key[0])
      setTimeout(() => {
        this.$emit('onBlurFn', true)
      }, 500)
    },
    // 取消
    closeCasader () {
      this.cascaderVisible = false
    }
  }
}
</script>

<style>

</style>
